<template>
  <div>
    <div style="display: flex; justify-content: flex-start; margin: 10px">
      <a-button type="primary" @click="editClass(null)">新增</a-button>
      <a-button
        type="primary"
        icon="search"
        @click="search()"
        style="margin:0 10px"
        >筛选</a-button
      >
      <!-- <span  style="padding-top:6px">选择语言：</span>
          <a-select
              placeholder="请筛选语言"
              v-model="language"
              style="width:300px"
              @change="languageChanges"
          >
              <a-select-option :value="1">简体中文</a-select-option>
              <a-select-option :value="2">繁体</a-select-option>
              <a-select-option :value="3">英语</a-select-option>
              <a-select-option value="">全部</a-select-option>
          </a-select> -->
    </div>

    <a-table
      bordered
      style="padding-top: 10px"
      :rowSelection="rowSelection"
      :columns="columns"
      :dataSource="dataTable"
      :rowKey="(record, index) => record.industryId"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="operation" slot-scope="text, row, index">
        <a-button size="small" type="primary" @click="undevelop(row)"
          >子行业</a-button
        >
        <a-button size="small" type="primary" @click="editClass(row)"
          >编辑</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 弹框 -->
    <a-modal
      title="添加父级行业"
      :visible="visibleDetails"
      @cancel="visibleDetails = false"
      cancelText="关闭"
      okText="确定"
      @ok="handleSubmit"
    >
      <a-form :form="formData">
        <a-form-item
          label="语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            placeholder="请选择文章语言"
            v-model="planDetails.language"
            @change="languageChange"
          >
            <a-select-option :value="1">简体中文</a-select-option>
            <a-select-option :value="2">繁体</a-select-option>
            <a-select-option :value="3">英语</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="行业名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            v-model="planDetails.industryName"
            placeholder="请输入行业名称"
          ></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 弹框筛选   -->
    <a-modal
      title="筛选数据"
      :visible="visibleSearch"
      cancelText="关闭"
      okText="筛选"
      @ok="handleSearch"
      @cancel="visibleSearch = false"
    >
      <div>
        <a-form>
          <a-form-item
            label="语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="语言"
              v-model="filterOutObj.language"
            >
              <a-select-option
                :key="i.language"
                v-for="i in languageList"
                :value="i.language"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
var rowKeys = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    rowKeys = selectedRows;
  }
};
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visibleDetails: false,
      dataTable: [],
      columns: [
        {
          title: "父级行业名称",
          dataIndex: "industryName",
          align: "center",
          key: "industryName",
          scopedSlots: { customRender: "industryName" }
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体";
            } else if (text == "3") {
              return "英语";
            }
          }
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      rowSelection: {
        hideDefaultSelections: true
      },
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
        language: ""
      },
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1
      },
      filterOutObj: {
        language: "",
        type: ""
      },
      totalPage: 0,
      showHOST: api.showHOST,
      radioType: 2,
      formData: this.$form.createForm(this),
      planDetails: {
        industryName: "",
        language: "",
        industryId: "",
        parentId: "",
        type: ""
      },
      HOST: api.HOST,
      visibleSearch: false,
      languageList: [
        { language: 1, name: "简体中文" },
        { language: 2, name: "繁体中文" },
        { language: 3, name: "英文" },
        { language: "", name: "全部" }
      ]
    };
  },
  methods: {
    search() {
      this.visibleSearch = true;
    },
    handleSearch() {
      this.visibleSearch = false;
      this.pagination.current = 1;
      this.form.language = this.filterOutObj.language;
      this.getPlan();
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    languageChange(values) {
      this.planDetails.language = values;
    },
    languageChanges(values) {
      this.form.language = values;
      this.getPlan();
    },
    typeChange(values) {
      this.planDetails.type = values;
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.getPlan();
    },
    getPlan() {
      this.form.page = this.pagination.current;
      api.getParentIndustryPage(this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.pagination.total = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    tableChange(pagination, filters, sorter) {
      this.form.page = pagination.current;
      this.getPlan();
    },
    delPlan(row) {
      api
        .delIndustry({
          ids: row.industryId
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getPlan();
          } else {
            this.$message.error(res.description);
          }
        });
    },
    editClass(row) {
      if (row != null) {
        this.planDetails = JSON.parse(JSON.stringify(row));
      } else {
        this.planDetails = {};
      }
      this.visibleDetails = true;
    },
    handleSubmit(e) {
      (this.planDetails.parentId = "0"),
        (this.planDetails.type = "1"),
        api.saveIndustry(this.planDetails).then(res => {
          if (res.code == 200) {
            this.visibleDetails = false;
            this.planDetails = {};
            this.$message.success("保存成功");
            this.getPlan();
          } else {
            this.$message.error(res.description);
          }
        });
    },
    undevelop(row) {
      this.$router.push({
        path: "industryChildClassify",
        query: { params: row.industryId }
      });
      // this.visibleDetails = true;
    },
    previewImage(file) {
      console.log(file);
      window.open(file.url);
    }
  },
  created() {
    this.getPlan();
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
